<template>
  <div class="head">
    <h3>
      <img src="/img/hlmlogo.png" alt />
    </h3>
    <van-search
      disabled
      placeholder="请输入搜索关键词"
      input-align="center"
      class="search"
      shape="round"
      @click="go()"
    />
    <h4 v-show="!this.IsLogin">
      <router-link to="/login">登录</router-link>
    </h4>
    <img
      class="user"
      src="/img/users.png"
      alt
      v-show="this.IsLogin"
      @click="$router.push('/user')"
    />
  </div>
</template>

<script>
import { getUser } from "../utils/auth.js";
export default {
  data() {
    return {
      IsLogin: true
    };
  },

  components: {},

  methods: {
    go() {
      this.$router.push("/Search");
    },
    // 判断是否登录
    isLogin() {
      let result = getUser();
      if (!result) {
        result = false;
      }
      this.IsLogin = result;
    }

    //
  },

  created() {
    // 刷新根据是否登录，渲染登录图标；
    this.isLogin();
  }
};
</script>

<style scoped lang='scss'>
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";
body {
  display: flex;
  flex-direction: column;
}
.head {
  height: vw(100);
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: white;
  h3 {
    width: vw(138);
    height: vw(100);
    float: left;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .search {
    float: left;
    border-radius: vw(45);
    height: vw(76);
    width: vw(500);
    border-width: 0;
    background-color: white;
    //background-color: grey;
    margin: vw(12) vw(16);
  }
  h4 {
    a {
      color: grey;
      font-size: vw(27);
      line-height: vw(100);
      padding-left: vw(8);
      padding-top: vw(20);
    }
  }
  .user {
    position: absolute;
    width: v(43);
    height: v(43);
    right: 0;
    top: 3px;
  }
}
</style>